<template>
	<view class="ShoppingCart">
		<navigator hover-class="none" url="/packagePerson/address/edit-address" class="shopping f-background radius24">
			<view class="font-weight-600 color2 size-34 dis-cen">
				<text v-if="!addsData.id">选择小区</text>
				<text
					v-else>{{addsData.addrType*1 == 1 ? addsData.communityName : addsData.addressInfo}}{{addsData.houseNumber}}</text>
				<text class="iconfont icon-right-1-copy color0"></text>
			</view>

			<view class="font-weight-400 color9 size-28">
				<text v-if="!addsData.id">请选择需要服务的小区</text>
				<text v-else>{{addsData.consignee}} {{addsData.sex == 1?'先生':'女士'}} {{addsData.telephone}}</text>
			</view>
		</navigator>
		<!-- 		<u-sticky :offset-top="0">
			<view class="navig f5-background">
				<view class="navig-title text-align por">
					<view class="size-36 width-height100 dis color-8" @click="goodsType = 1,postGoodsCartStatis(1)">
						<text :class="{'color3 font-weight-600':goodsType == 1}">团长推荐</text>
					</view>
					<view class="strip poa" v-if="goodsType == 1"></view>
				</view>
				<view class="navig-title text-align por">
					<view class="size-36 width-height100 dis color-8" @click="goodsType = 2,postGoodsCartStatis(1)">
						<text :class="{'color3 font-weight-600':goodsType == 2}">粮油调味</text>
					</view>
					<view class="strip poa" v-if="goodsType == 2"></view>
				</view>
			</view>
		</u-sticky> -->
		<view class="carts f-background">
			<view class="neighbor-title color">
				<view class="title dis" :class="goodsType == 1 ? 'font-weight-600' : 'color2 font-weight-400'"
					@click="goodsType = 1,postGoodsCartStatis(1)">
					<image class="title-icon poa app-left" v-if="goodsType == 1" src="@/static/img/sk.png" mode="">
					</image>
					<text class="size-34 font-weight por">团长推荐</text>
				</view>
				<view class="title dis" :class="goodsType == 2 ? 'font-weight-600' : 'color2 font-weight-400'"
					@click="goodsType = 2,postGoodsCartStatis(1)">
					<image class="title-icons poa app-right" v-if="goodsType == 2" src="@/static/img/sk.png" mode="">
					</image>
					<text class="size-34 font-weight por">粮油调味</text>
				</view>
			</view>
			<view class="default f-background" v-if="!goodsData.length && !loading">
				<Default tisName="暂无商品信息！" />
			</view>
			<view class="carts-cart">
				<view class="carts-ali por" v-for="(item,index) in goodsData" :key="index">
					<u-skeleton rows="0" avatar avatarSize="170rpx" :title="false" :loading="loading">
						<u--image width="170rpx" height="170rpx" radius="16rpx" :src="item.goodsUrl || 1">
							<view slot="error" style="font-size: 24rpx;">加载失败</view>
						</u--image>
					</u-skeleton>
					<u-skeleton rows="2" :rowsWidth="['204rpx','76rpx']" :rowsHeight="['30rpx','28rpx']" :title="false"
						:loading="loading">
						<view class="carts-con height100 between">
							<view class="font-weight-600 color2 size-32 box">{{item.goodsName || '-'}}</view>
							<view class="color font-weight-600 size-40">
								<text class="size-28">¥</text>{{item.goodsAmount || 0}}
							</view>
						</view>
					</u-skeleton>
					<view class="min-number dis-ali text-align poa">
						<view class="u-number-box__minus dis" @click="onDelCart('del',item)" v-if="item.goodsCount">
							<text class="iconfont icon-jian size-28 color"></text>
						</view>
						<input disabled type="text" class="u-number-box__input" v-model="item.goodsCount || 0"
							v-if="item.goodsCount" />
						<view class="u-number-box__plus dis" @click="onDelCart('add',item)"
							:class="{'xuanzhuan':animate}">
							<text class="iconfont icon-jia size-28 color-f"></text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 定义确认下单 -->
		<view class="confirm pof f-background">
			<view class="pay-later dis-ali">
				<view class="later font-weight-400 color2 size-24 dis">
					<text>先送后付丨免配送丨小时达</text>
					<text class="later-pays" v-if="infoDataAll.totalPrice*1">赠{{infoDataAll.totalPrice || 0}}豆</text>
				</view>
			</view>
			<view class="confirm-order dis-cen">
				<view class="font-weight-600 color2 size-24">
					共{{infoDataAll.totalGoodsCount || 0}}件 合计：<text class="color size-56"><text
							class="size-40">¥</text>{{infoDataAll.totalPrice || 0}}</text>
				</view>
				<u-button type="primary" :disabled="disabled"
					:customStyle="{width: '290rpx',height: '90rpx',borderRadius: '100rpx',margin: '0'}"
					color="linear-gradient( 270deg, #EB0000 0%, #FF4545 100%)" @click="postPayGoodsOrder">
					<text class="color-f font-weight-600 size-36">确认下单</text>
				</u-button>
			</view>
			<view class="inset-bottom"></view>
		</view>
		<view class="inset-bottom"></view>
	</view>
</template>

<script>
	import { GoodsCartStatis, AddUpdGoodsCart, PayGoodsOrder } from "@/api/index"
	import Default from "@/components/default/default"
	export default {
		components: { Default },
		data() {
			return {
				disabled: false,
				loading: true,
				addsData: {},
				goodsData: [{}, {}, {}],
				infoDataAll: {},
				goodsType: 1
			}
		},
		onLoad(options) {
			console.log('optionsoptions',options)
			this.goodsType = options.type*1
		},
		onShow() {
			this.addsData = uni.getStorageSync('addsData')
			this.postGoodsCartStatis()
		},
		methods: {
			async postGoodsCartStatis() {
				const { code, data } = await GoodsCartStatis({
					size: 100,
					current: 1,
					communityId: this.addsData.communityId,
					goodsType: this.goodsType
				})
				if (code == '200') {
					this.loading = false
					this.goodsData = data.goodsInfoList
					this.infoDataAll = data
				}
			},
			// 修改购物车数据
			async postAddUpdGoodsCart(id, num) {
				const carts = {
					isDel: !num ? 1 : 0,
					goodsId: id,
					goodsCount: num,
					communityId: this.addsData.communityId
				}
				const { data, code } = await AddUpdGoodsCart(carts)
				if (code == '200') {
					this.postGoodsCartStatis()
				}
			},
			// 购物车下单
			async postPayGoodsOrder() {
				let tis = ''
				if (!this.addsData.communityId) tis = '请选择小区'
				else if (!this.goodsData.length) tis = '您还没有添加商品哦'
				if (tis) {
					uni.$u.toast(tis, 1000)
					return
				}
				const carts = {
					addressId: this.addsData.id,
					communityId: this.addsData.communityId,
					goodsType: this.goodsType
				}
				this.disabled = true
				const { data, code } = await PayGoodsOrder(carts)
				if (code == '200') {
					this.onJumpPage(data.orderId)
				} else this.disabled = false
			},
			onJumpPage(id) {
				// let urlData = url[name]
				uni.navigateTo({
					url: `/packageOrder/payment-results/payment-results?id=${id}`
				});
			},
			// 点击立即下单
			// onGoodsOrder() {
			// 	if (!this.goodsData.length) {
			// 		uni.showToast({
			// 			title: '您还没有添加商品哦！',
			// 			duration: 2000,
			// 			icon: 'none'
			// 		})
			// 		return
			// 	}
			// 	const _this = this
			// 	uni.showModal({
			// 		content: '确认下单吗？',
			// 		confirmColor: '#EB0000',
			// 		success(res) {
			// 			if (res.confirm) {
			// 				console.log('用户点击确定');
			// 				_this.disabled = true
			// 				_this.postPayGoodsOrder()
			// 			} else if (res.cancel) console.log('用户点击取消');
			// 		}
			// 	})
			// },
			// 修改数量
			onDelCart(type, item) {
				console.log(type, item)
				let num = 0
				if (type == 'add') num = item.goodsCount * 1 + 1
				else num = item.goodsCount * 1 - 1
				if (num == 0) {
					const _this = this
					uni.showModal({
						content: '您确定要删除商品吗？',
						confirmColor: '#EB0000',
						success(res) {
							if (res.confirm) {
								console.log('用户点击确定');
								_this.postAddUpdGoodsCart(item.id, num)
							} else if (res.cancel) console.log('用户点击取消');
						}
					})
					return
				}
				this.postAddUpdGoodsCart(item.id, num)
			}
		}
	}
</script>

<style lang="scss">
	.ShoppingCart {
		padding: 20rpx 20rpx 150rpx;

		.neighbor-title {
			background: #EBEBEB;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			margin-bottom: 30rpx;

			.title {
				padding: 0 24rpx;
				height: 100rpx;
				position: relative;
				font-size: 36rpx;
			}

			.title-icon,
			.title-icons {
				width: 420rpx;
				height: 102rpx;
			}

			.title-icons {
				transform: scaleX(-1);
			}
		}

		// 导航u部分
		.navig {
			display: grid;
			grid-template-columns: repeat(2, 1fr);

			.navig-title {
				height: 130rpx;
				line-height: 130rpx;
			}



			.strip {
				width: 100rpx;
				height: 10rpx;
				left: 50%;
				bottom: 20rpx;
				margin-left: -50rpx;
				border-radius: 100rpx;
				background: linear-gradient(90deg, #FF4646 39%, #EB0000 100%);
			}
		}

		.confirm {
			width: 100%;
			left: 0;
			bottom: 0;
			box-shadow: 6rpx 6rpx 20rpx 0rpx rgba(0, 0, 0, 0.2);
			border-radius: 0rpx 24rpx 0rpx 0rpx;
			z-index: 1000;

			.pay-later {
				margin-top: -48rpx;
				margin-left: 24rpx;
				.later-pays{
					color: #E38134;
					margin-left: 16rpx;
				}
				.later {
					height: 48rpx;
					background: linear-gradient(90deg, #FFDCB8 0%, #FFE9D2 100%);
					border-radius: 20rpx 24rpx 24rpx 0rpx;
					padding: 0 20rpx;
				}
			}

			.confirm-order {
				padding: 20rpx 20rpx 20rpx 24rpx;
				box-sizing: border-box;

				.size-56 {
					font-size: 56rpx;
				}
			}
		}

		.shopping {
			box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(0, 0, 0, 0.03);
			padding: 32rpx 32rpx 38rpx;
			display: grid;
			grid-gap: 28rpx;
			margin-bottom: 24rpx;
		}

		.carts {
			border-radius: 24rpx;
			// display: grid;
			// grid-gap: 30rpx;
			border-radius: 24rpx;
			overflow: hidden;

			// padding: 32rpx 32rpx 34rpx;
			.default {
				height: 50vh;
			}
		}

		.carts-cart {
			padding: 0 30rpx 50rpx;
		}

		.carts-ali {
			display: grid;
			grid-template-columns: 170rpx 1fr;
			grid-gap: 24rpx;
			padding-top: 24rpx;

			.min-number {
				right: 12rpx;
				bottom: 0;
			}

			.carts-con {
				width: calc(100vw - 298rpx);
				padding: 10rpx 0 12rpx;
			}
		}
	}
</style>